<!--
* @description:新增车辆
* @fileName: TheNewVehicle
* @author:李周蓬
* @date:2021-1-
* @后台人员:李周蓬
-->
<template>
  <div>
    <table>
      <tr>
        <td>厂牌型号：</td>
        <td>
          <el-input
            v-model="AddData.CarBrand"
            placeholder="请输入内容"
          ></el-input>
        </td>
        <td>车牌号:</td>
        <td>
          <el-input
            v-model="AddData.License"
            placeholder="请输入内容"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td>司机姓名：</td>
        <td>
          <el-input
            v-model="AddData.DriverName"
            placeholder="请输入内容"
          ></el-input>
        </td>
        <td>所属公司:</td>
        <td>
          <el-select v-model="AddData.CompanyId" placeholder="请选择">
            <el-option
              v-for="item in bindData"
              :key="item.value"
              :label="item.CompanyName"
              :value="item.Id"
            >
            </el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>车型：</td>
        <td>
          <el-input
            v-model="AddData.CarType"
            placeholder="请输入内容"
          ></el-input>
        </td>
        <td>车辆颜色:</td>
        <td>
          <el-input
            v-model="AddData.CarColor"
            placeholder="请输入内容"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td>购置日期：</td>
        <td>
          <el-date-picker
            v-model="AddData.PurchaseTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </td>
        <td>营运证号:</td>
        <td>
          <el-input
            v-model="AddData.MarketingNumber"
            placeholder="请输入内容"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td>保险到期日期：</td>
        <td>
          <el-date-picker
            v-model="AddData.ExpiryTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </td>
        <td>年检到期日期:</td>
        <td>
          <el-date-picker
            v-model="AddData.CheckTime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </td>
      </tr>
      <tr>
        <td>保养公里数设置：</td>
        <td>
          <el-input
            v-model="AddData.Kilometre"
            placeholder="请输入内容"
          ></el-input>
        </td>
      </tr>
      <tr>
        <td>车辆照片：</td>
        <td>
          
          <el-upload
            class="avatar-uploader"
            action="https://localhost:44399/api/app/file-common-app/uplosdqiniu"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </td>
      </tr>
      <tr>
        <td>保险卡照片：</td>
        <td>
           <el-upload
            class="avatar-uploader"
            action="https://localhost:44399/api/app/file-common-app/uplosdqiniu"
            :show-file-list="false"
            :on-success="handleAvatarSuccesss"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrls" :src="imageUrls" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </td>
      </tr>
      <tr>
        <td>
          <el-button type="primary" @click="add">提交</el-button>
          <el-button @click="go">取消</el-button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
      imageUrls: "",
      AddData: {
        CarNumber: "",
        CarBrand: "",
        License: "",
        DriverName: "",
        CompanyId: 0,
        CompanyName: "",
        CarType: "",
        CarColor: "",
        PurchaseTime: "",
        MarketingNumber: "",
        ExpiryTime: "",
        CheckTime: "",
        Kilometre: "",
        CarImg: "",
        ExpiryImg: "",
        IsDelete: 0,
      },
      bindData: [],
    };
  },
  methods: {
     handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.AddData.CarImg =res.FileUrl;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
       handleAvatarSuccesss(res, file) {
        this.imageUrls = URL.createObjectURL(file.raw);
        this.AddData.ExpiryImg = res.FileUrl;
      },
    // //上传
    // upchuan(res) {
    //   if (res != null) {
    //     this.$message.success("上传Excel成功");
    //     this.AddData.CarImg = res.FileUrl;
    //   } else {
    //     this.$message.success("上传Excel失败");
    //   }
    // },
    // //上传
    // upchuans(res) {
    //   if (res != null) {
    //     this.$message.success("上传Excel成功");
    //     this.AddData.ExpiryImg = res.FileUrl;
    //   } else {
    //     this.$message.success("上传Excel失败");
    //   }
    // },
    //绑定下拉框
    bind() {
      this.$axios
        .get("https://localhost:44399/api/app/car/show-company")
        .then((res) => {
          this.bindData = res.data;
          this.bindData.unshift({ Id: 0, CompanyName: "请选择" });
        });
    },
    add() {
      this.$axios
        .post("https://localhost:44399/api/app/car/add-car", this.AddData)
        .then((res) => {
          if (res.data > 0) {
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.$router.push("/VehicleManagement");
          } else {
            this.$message({
              type: "error",
              message: "添加失败!",
            });
          }
        });
    },
    go() {
      this.$router.go(-1);
    },
  },
  created() {
    this.bind();
  },
};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>